import React, { PureComponent, } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import {
  Row, Col, Card, Form, Input, Tabs, Spin, Icon, Button, Modal, message, Table, Tag, DatePicker, InputNumber, Popconfirm
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './FranDetail.less';
import TextArea from 'antd/lib/input/TextArea';
import { CSVLink } from 'react-csv';

const { TabPane } = Tabs;
const FormItem = Form.Item;

@connect(({ fran, loading }) => ({
  fran,
  loading: loading.models.fran,
}))
@Form.create()
export default class FranDetail extends PureComponent {
  state = {
    buttonType: 0,
    memberHeaders: [
      { label: '会员id', key: 'userId' }, { label: '手机号', key: 'userPhone' },
      { label: '订单数', key: 'ordersCnt' }, { label: '销售额', key: 'payTotal' },
    ],
    recordHeaders: [
      { label: '订单号', key: 'userId' }, { label: '下单时间', key: 'userPhone' },
      { label: '商品名称', key: 'ordersCnt' }, { label: '订单类型', key: 'payTotal' },
      { label: '支付金额', key: 'ordersCnt' }, { label: '会员手机号', key: 'payTotal' },
      { label: '订单状态', key: 'ordersCnt' }
    ],
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'fran/fetchDetail',
      payload: { franId: this.props.match.params.franId },
    });

    dispatch({
      type: 'fran/fetchFranMember',
      payload: { franId: this.props.match.params.franId, "pageNum": "1", "pageSize": "10" },
    });

    dispatch({
      type: 'fran/fetchExportFranMember',
      payload: { franId: this.props.match.params.franId, "pageNum": "1", "pageSize": "0" },
    });

    dispatch({
      type: 'fran/fetchOrderRecord',
      payload: { franId: this.props.match.params.franId, "pageNum": "1", "pageSize": "10" },
    });
  }

  _submit() {
    this.props.dispatch({
      type: 'fran/editFran',
      payload: this.props.form.getFieldsValue(),
      callback: () => this._callback()
    });
  }

  _callback() {
    this.setState({
      buttonType: 0
    })
    const { dispatch } = this.props;
    dispatch({
      type: 'fran/fetchDetail',
      payload: { franId: this.props.match.params.franId },
    });
  }

  _memberPaginationChange(pagination) {
    const { dispatch } = this.props;
    const params = {
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
    };
    dispatch({
      type: 'fran/fetchFranMember',
      payload: params,
    });
  }

  _recordPaginationChange(pagination) {
    const { dispatch } = this.props;
    const params = {
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
    };
    dispatch({
      type: 'fran/fetchOrderRecord',
      payload: params,
    });
  }

  render() {
    const { franDetail, franMember, orderRecord, franMemberPagination, orderRecordPagination } = this.props.fran;

    const franMemberTotal = this.props.fran.franMemberPagination.total;

    const orderRecordTotal = this.props.fran.orderRecordPagination.total;

    const franMemberColumns = [
      {
        title: '会员id',
        dataIndex: 'userId',
        key: 'userId',
      },
      {
        title: '手机号',
        dataIndex: 'userPhone',
        key: 'userPhone',
      },
      {
        title: '订单数',
        dataIndex: 'ordersCnt',
        key: 'ordersCnt ',
      },
      {
        title: '销售额',
        dataIndex: 'payTotal',
        key: 'payTotal',
      },
    ]

    const orderRecordColumns = [
      {
        title: '订单号',
        dataIndex: 'ordersId',
        key: 'ordersId',
      },
      {
        title: '下单时间',
        dataIndex: 'createTime',
        key: 'createTime',
      },
      {
        title: '商品名称',
        dataIndex: 'goodsName',
        key: 'goodsName ',
      },
      {
        title: '订单类型',
        dataIndex: 'ordersTypeName',
        key: 'ordersTypeName ',
      },
      {
        title: '支付金额',
        dataIndex: 'payCash',
        key: 'payCash ',
      },
      {
        title: '会员手机号',
        dataIndex: 'userPhone',
        key: 'userPhone ',
      },
      {
        title: '订单状态',
        dataIndex: 'ordersStsName',
        key: 'ordersStsName',
      },
    ]

    return (
      <Form>
        <PageHeaderLayout title="会员详情">
          <Button icon="left" type="primary" onClick={() => { this.props.dispatch(routerRedux.goBack()) }} >返回</Button>
          <Tabs>
            <TabPane tab="基本信息" key="1">
              {this.props.loading ?
                <Spin /> :
                <Card>
                  {
                    this.state.buttonType == 0 ?
                      <div>
                        <Button type="primary" onClick={() => this.setState({ buttonType: 1 })}>修改佣金比例</Button>
                        <Button type="primary" style={{ marginLeft: '20px' }} onClick={() => this.setState({ buttonType: 2 })}>修改备注</Button>
                      </div>
                      :
                      <div>
                        <Button type="primary" onClick={() => this._submit()}>保存</Button>
                        <Button type="primary" style={{ marginLeft: '20px' }} onClick={() => this.setState({ buttonType: 0 })}>取消</Button>
                      </div>
                  }

                  <div className={styles.table}>

                    <div className={styles.row}>
                      <div className={styles.item}>
                        <div className={styles.label}>加盟商ID</div>
                        {this.props.form.getFieldDecorator('franId', {
                          rules: [{ required: true, message: '加盟商ID' }],
                          initialValue: franDetail ? franDetail.franId : null,
                        })(
                          <div className={styles.valueStyle}>{franDetail ? franDetail.franId : null}</div>
                        )}

                      </div>
                      <div className={styles.item}>
                        <div className={styles.label}>联系人</div>
                        <div className={styles.valueStyle}>{franDetail ? franDetail.franUser : null}</div>
                      </div>
                    </div>

                    <div className={styles.row}>
                      <div className={styles.item}>
                        <div className={styles.label}>加盟商名称</div>
                        <div className={styles.valueStyle}>{franDetail ? franDetail.franName : null}</div>
                      </div>
                      <div className={styles.item}>
                        <div className={styles.label}>联系电话</div>
                        <div className={styles.valueStyle}>{franDetail ? franDetail.franPhone : null}</div>
                      </div>
                    </div>

                    <div className={styles.row}>
                      <div className={styles.item}>
                        <div className={styles.label}>M码</div>
                        <div className={styles.valueStyle}>{franDetail ? franDetail.mCode : null}</div>
                      </div>
                      <div className={styles.item}>
                        <div className={styles.label}>门店地址</div>
                        <div className={styles.valueStyle}>{franDetail ? franDetail.franAddr : null}</div>
                      </div>
                    </div>

                    <div className={styles.row}>
                      <div className={styles.item}>
                        <div className={styles.label}>佣金比例</div>

                        {this.state.buttonType == 1 ?
                          this.props.form.getFieldDecorator('commRatio', {
                            rules: [{ required: true, message: '请输入佣金比例' }],
                            initialValue: franDetail ? franDetail.commRatio : null,
                          })(
                            <InputNumber min={0} max={100} precision={0} placeholder="请输入佣金比例" style={{ width: '77.7777%', height: '98%' }} />
                          ) :
                          <div className={styles.valueStyle}>{franDetail ? franDetail.commRatio : null}</div>
                        }


                      </div>
                      <div className={styles.item}>
                        <div className={styles.label}>录入时间</div>
                        <div className={styles.valueStyle}>{franDetail ? franDetail.isLoginSapp == "0" ? '否' : '是' : null}</div>
                      </div>
                    </div>

                    <div className={styles.row}>
                      <div className={styles.item}>
                        <div className={styles.label}>备注</div>


                        {this.state.buttonType == 2 ?
                          this.props.form.getFieldDecorator('remark', {
                            rules: [{ required: true, message: '请输入备注' }],
                            initialValue: franDetail ? franDetail.remark : null,
                          })(
                            <TextArea maxLength="200" placeholder="请输入备注" style={{ width: '77.7777%', height: '98%' }} />
                          ) :
                          <div className={styles.valueStyle}>{franDetail ? franDetail.remark : null}</div>
                        }


                      </div>
                      <div className={styles.item}>
                        <div className={styles.label}> </div>
                        <div className={styles.valueStyle}> </div>
                      </div>
                    </div>
                  </div>


                </Card>
              }


            </TabPane>
            <TabPane tab={"关联会员" + franMemberTotal} key="2">
              {(franMember) ?
                <Card>
                  <Button type="primary" style={{ marginBottom: '15px' }}>
                    <CSVLink data={this.props.fran.exportFranMember} headers={this.state.memberHeaders} filename={"关联会员.csv"}>导出</CSVLink>
                  </Button>
                  <Table
                    bordered
                    loading={this.props.loading}
                    dataSource={franMember}
                    columns={franMemberColumns}
                    pagination={franMemberPagination}
                    onChange={(pagination) => this._memberPaginationChange(pagination)}
                  />
                </Card>
                :
                '暂无记录'
              }
            </TabPane>
            <TabPane tab={"订单明细" + orderRecordTotal} key="3">
              {(orderRecord) ?
                <Card>
                  <Button type="primary" style={{ marginBottom: '15px' }}>
                    <CSVLink data={this.props.fran.exportOrderRecord} headers={this.state.recordHeaders} filename={"订单明细.csv"}>导出</CSVLink>
                  </Button>
                  <Table
                    bordered
                    loading={this.props.loading}
                    dataSource={orderRecord}
                    columns={orderRecordColumns}
                    pagination={orderRecordPagination}
                    onChange={(pagination) => this._recordPaginationChange(pagination)}
                  />
                </Card>
                :
                '暂无记录'
              }
            </TabPane>

          </Tabs>
        </PageHeaderLayout>
      </Form>
    );
  }
}
